import React, {useEffect, useState,} from 'react';
import InfiniteScroll from 'react-infinite-scroller';
import {Card, List, Typography} from 'antd';
import {connect, Link} from 'umi';
import moment from "moment";
import styles from "./index.less";
import AvatarList from "@/components/AvatarList";
import {genAvatars, genTdkCrumbs, typeUrl} from "@/utils/utils";
import {fetchSeoCrumbs} from "@/pages/home/service";
import {PageContainer} from "@ant-design/pro-layout";

const {Paragraph} = Typography;

const Products = (props) => {
  const {
    dispatch,
    list = [],
    total,
    pageSize,
    loading,
    url,
    slugTerm,
  } = props;

  const [cur, setCur] = useState(1);
  useEffect(() => {
    dispatch({
      type: 'workBooks/fetch',
      payload: {
        pageSize,
        current: 1,
        sorter: {"createTime":"descend"},
        path: url
      },
    });
    setCur(cur+1);
  }, [url]);

  const fetchMore = (num) => {
    dispatch({
      type: 'workBooks/appendFetch',
      payload: {
        pageSize,
        current: num,
        sorter: {"createTime":"descend"},
        path: url
      },
    });
    setCur(num+1);
  };

  useEffect(async () => {
    const res = await fetchSeoCrumbs({ slugTerm, tempType: 'product'});
    if (res && res.data) {
      await genTdkCrumbs({seoCrumbs: res.data}, dispatch, '', '');
    }
  }, [url]);

  const cardList = list && (
    <InfiniteScroll
      initialLoad={false}
      pageStart={0}
      loadMore={() => fetchMore(cur)}
      hasMore={total > (cur - 1) * pageSize}
    >
      <List
        rowKey="id"
        loading={loading}
        grid={{gutter: 24,xs: 1,sm: 2,md: 3,lg: 3,xl: 4,xxl: 4,}}
        dataSource={list}
        renderItem={({pubType, id, pubTitle, cover, createTime, members}) => (
          <List.Item>
              <Card className={styles.card} hoverable onClick={() => window.open(typeUrl({pubType, id}), '_blank')}
                    cover={<img alt={pubTitle} src={cover}/>}>
                <Card.Meta
                  title={<Link to={typeUrl({pubType, id})} target="_blank" rel="noopener">{pubTitle}</Link>}
                />
                <div className={styles.cardItemContent}>
                  <span>{moment(createTime).fromNow()}</span>
                  <div className={styles.avatarList}>
                    {members && <AvatarList size="small">
                      {genAvatars(`${id}-product-`, members)}
                    </AvatarList>}
                  </div>
                </div>
              </Card>
          </List.Item>
        )}
      />
    </InfiniteScroll>
  );

  const body = (<div className={styles.coverCardList}>
    <div className={styles.cardList}>{cardList}</div>
  </div>);
  return (url === '/' ? body : (<PageContainer title={false} breadcrumb={false}>{body}</PageContainer>)
  );
};

export default connect(({workBooks, loading, user}) => ({
  list: workBooks.list,
  total: workBooks.total,
  pageSize: workBooks.pageSize,
  current: workBooks.current,
  loading: loading.models.workBooks,
  tdk: user.tdk,
}))(Products);
